/*
 * @Author: herw
 * @Date: 2020-11-20 10:38:19
 * @Last Modified by: herw
 * @Last Modified time: 2020-12-01 13:17:57
 */
<template>
  <el-dialog
    append-to-body
    :close-on-click-modal="false"
    :visible.sync="dialogInChild"
    title="流程授权"
    width="800px"
  >
    <!--工具栏-->
    <div class="head-container">
      <el-button
        v-permission="['admin', 'definitionIdentityLink:edit']"
        icon="el-icon-plus"
        size="mini"
        style="float: right; padding: 6px 9px"
        type="primary"
        @click="doAdd"
      >新增</el-button>
    </div>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="identityLoading"
      :data="data"
      highlight-current-row
      stripe
      style="width: 100%"
      @selection-change="handleCurrentChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="identityId" label="授权ID" />
      <el-table-column prop="identityType" label="授权类型">
        <template slot-scope="scope">
          {{ scope.row.identityType === '1' ? '用户' : '角色' }}
        </template>
      </el-table-column>
      <el-table-column prop="identityName" label="授权名称" />
      <el-table-column
        v-permission="['admin', 'definitionIdentityLink:del']"
        label="操作"
        width="150px"
        align="center"
      >
        <template slot-scope="scope">
          <el-popover
            :ref="scope.row.id"
            v-permission="['admin', 'definitionIdentityLink:del']"
            placement="top"
            width="180"
          >
            <p>确定删除本条数据吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button
                size="mini"
                type="text"
                @click="$refs[scope.row.id].doClose()"
              >取消</el-button>
              <el-button
                :loading="delLoading"
                type="primary"
                size="mini"
                @click="delMethod(scope.row)"
              >确定</el-button>
            </div>
            <el-button
              slot="reference"
              type="danger"
              icon="el-icon-delete"
              size="mini"
            />
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <!--表单组件-->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="dialog"
      width="500px"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        size="small"
        label-width="80px"
      >
        <el-form-item label="授权类型" prop="identityType">
          <el-select
            v-model.number="form.identityType"
            placeholder="请选择"
            style="width: 370px"
          >
            <el-option
              v-for="item in identityTypes"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="授权ID" prop="identityId">
          <el-input v-model="form.identityId" style="width: 370px" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="cancel">取消</el-button>
        <el-button
          v-permission="['admin', 'definitionIdentityLink:add']"
          :loading="submitLoading"
          type="primary"
          @click="doSubmit"
        >确认</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import crud from '@/mixins/crud'
import { getIdentityLink, addIdentityLink, delIdentityLink } from '@/api/flowable/definition'

export default {
  name: 'IdentityLink',
  components: {},
  mixins: [crud],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    processDefinitionId: {
      type: String,
      default: ''
    },
    processDefinitionName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialog: false,
      identityLoading: false,
      submitLoading: false,
      form: {
        processDefinitionId: this.processDefinitionId,
        identityType: '',
        identityId: ''
      },
      identityTypes: [
        { id: 1, label: '用户', value: 1 },
        { id: 2, label: '角色', value: 2 }
      ],
      permission: {
        add: ['admin', 'definitionIdentityLink:add'],
        edit: ['admin', 'definitionIdentityLink:edit'],
        del: ['admin', 'definitionIdentityLink:del']
      },
      rules: {

      }
    }
  },
  computed: {
    dialogInChild: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
      this.toQuery()
    })
  },
  methods: {
    doAdd() {
      this.dialog = true
    },
    cancel() {
      this.dialog = false
      this.submitLoading = false
    },
    doSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.submitLoading = true
          addIdentityLink(this.form)
            .then(res => {
              this.notify('保存成功', 'success')
              this.dialog = false
              this.submitLoading = false
              this.toQuery()
            })
            .catch(err => {
              this.submitLoading = false
              console.log('error:' + err.response.data.message)
            })
        }
      })
    },
    delMethod(row) {
      this.delLoading = true
      delIdentityLink(this.processDefinitionId, row.identityId, row.identityType).then(() => {
        this.delLoading = false
        this.$refs[row.id].doClose()
        this.notify('删除成功', 'success')
        this.toQuery()
      }).catch(() => {
        this.delLoading = false
        this.$refs[row.id].doClose()
      })
    },
    toQuery() {
      this.identityLoading = true
      getIdentityLink(this.processDefinitionId).then(data => {
        this.data = data
        this.identityLoading = false
      })
    },
    handleCurrentChange(selection) {

    }
  }
}
</script>
